<template lang="pug">
  div.welcome
    template(v-if="name === 'admin'")
      kalix-panel-group(v-bind:targetURL="groupDataUrl" v-on:handleGetDataComplete="handleGetDataComplete" v-on:handleSetLineChartData="handleSetLineChartData")
      el-row(style="background:#fff;padding:16px 16px 0;margin-bottom:32px;")
        kalix-line-chart(v-bind:targetURL="lineChartUrl")
      el-row(v-bind:gutter="32")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-raddar-chart(v-bind:targetURL="adminRaddarChartUrl")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-pie-chart(v-bind:targetURL="adminPieChartUrl1")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-pie-chart(v-bind:targetURL="adminPieChartUrl2")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-bar-chart(v-bind:targetURL="adminBarChartUrl1")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-bar-chart(v-bind:targetURL="adminBarChartUrl2")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-bar-chart(v-bind:targetURL="adminBarChartUrl3")
    template(v-else-if="name === 'oa'")
      kalix-panel-group(v-bind:targetURL="groupDataUrl" v-on:handleGetDataComplete="handleGetDataComplete" v-on:handleSetLineChartData="handleSetLineChartData")
      el-row(style="background:#fff;padding:16px 16px 0;margin-bottom:32px;")
        kalix-line-chart(v-bind:targetURL="lineChartUrl")
      el-row(v-bind:gutter="32")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-raddar-chart(v-bind:targetURL="oaRaddarChartUrl1")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-raddar-chart(v-bind:targetURL="oaRaddarChartUrl2")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-pie-chart(v-bind:targetURL="oaPieChartUrl1")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-pie-chart(v-bind:targetURL="oaPieChartUrl2")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-bar-chart(v-bind:targetURL="oaBarChartUrl1")
        el-col(v-bind:xs="24" v-bind:sm="24" v-bind:lg="8")
          div.chart-wrapper
            kalix-bar-chart(v-bind:targetURL="oaBarChartUrl2")
    template(v-else)
      div Welcome
        b {{name}}
</template>

<script type="text/ecmascript-6">
  import Cache from '../corelib/common/cache'

  let baseLineChartUrl = ''
  let baseRaddarCharUrl = ''
  let basePieCharUrl = ''
  let baseBarCharUrl = ''

  export default {
    name: 'Welcome',
    data() {
      return {
        name: null,
        groupDataUrl: '',
        lineChartUrl: '',
        adminRaddarChartUrl: '',
        adminPieChartUrl1: '',
        adminPieChartUrl2: '',
        adminBarChartUrl1: '',
        adminBarChartUrl2: '',
        adminBarChartUrl3: '',
        oaRaddarChartUrl1: '',
        oaRaddarChartUrl2: '',
        oaPieChartUrl1: '',
        oaPieChartUrl2: '',
        oaBarChartUrl1: '',
        oaBarChartUrl2: ''
      }
    },
    mounted() {
      this.fetchData()
    },
    watch: {'$route': 'fetchData'},
    methods: {
      fetchData() {
        if (this.$route.name === 'login' || this.$route.name === 'workflow') {
          return
        }
        this.name = this.$route.params.app || this.name
        this.getDict()
        // console.log(this.$route.params.name);
        // dashboard
        this.groupDataUrl = '/camel/rest/' + this.name + '/dashboard/panelGroup'
        baseLineChartUrl = '/camel/rest/' + this.name + '/dashboard/lineChart?chartKey='
        baseRaddarCharUrl = '/camel/rest/' + this.name + '/dashboard/raddarChart?chartKey='
        basePieCharUrl = '/camel/rest/' + this.name + '/dashboard/pieChart?chartKey='
        baseBarCharUrl = '/camel/rest/' + this.name + '/dashboard/barChart?chartKey='
        switch (this.name) {
          case 'admin':
            this.adminRaddarChartUrl = baseRaddarCharUrl + 'test1'
            this.adminPieChartUrl1 = basePieCharUrl + 'users'
            this.adminPieChartUrl2 = basePieCharUrl + 'functions'
            this.adminBarChartUrl1 = baseBarCharUrl + 'logins'
            this.adminBarChartUrl2 = baseBarCharUrl + 'users'
            this.adminBarChartUrl3 = baseBarCharUrl + 'functions'
            break
          case 'oa':
            this.oaRaddarChartUrl1 = baseRaddarCharUrl + 'test1'
            this.oaRaddarChartUrl2 = baseRaddarCharUrl + 'test1'
            this.oaPieChartUrl1 = basePieCharUrl + 'test1'
            this.oaPieChartUrl2 = basePieCharUrl + 'test1'
            this.oaBarChartUrl1 = baseBarCharUrl + 'test1'
            this.oaBarChartUrl2 = baseBarCharUrl + 'test1'
            break
          default:
            break
        }
      },
      getDict() {
        if (this.name) {
          const DictURL = `/camel/rest/${this.name}/dicts`
          const DictKey = `${this.name.toUpperCase()}-DICT-KEY`
          if (!Cache.get(DictKey)) {
            const data = {
              page: 1,
              start: 0,
              limit: 200,
              sort: '[{\'property\': \'value\', \'direction\': \'ASC\'}]'
            }
            this.axios.get(DictURL, {
              params: data
            }).then(response => {
              if (response.data) {
                Cache.save(DictKey, JSON.stringify(response.data.data))
                console.log(`dict cached under key ${DictKey}`, response.data)
              }
            })
          }
        }
      },
      handleGetDataComplete(key) {
        if (key) {
          this.lineChartUrl = baseLineChartUrl + key
        } else {
          this.lineChartUrl = ''
        }
      },
      handleSetLineChartData(key) {
        this.lineChartUrl = baseLineChartUrl + key
      }
    },
    components: {},
    computed: {}
  }
</script>

<style scoped lang="stylus" type="text/stylus">
  .welcome
    padding 32px
    height 100%
    box-sizing border-box
    overflow auto
    /*background-color: rgb(240, 242, 245);*/
    .chart-wrapper
      background #fff
      padding 16px 16px 0
      margin-bottom 32px


</style>
